.container {
  width: 1000px;
  margin: 30px auto;
  background-color: #ddd;
  display: grid;
  // grid-template-rows: repeat(2, 150px);
  // grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  // 设置隐式行的高度
  grid-auto-rows: 80px;
  // 设置隐式列的宽度
  grid-auto-columns: 0.5fr;
  // 设置隐式流生成的方式
  grid-auto-flow: row dense;
  // 对齐单元格到grid area
  // align-items: center;
  // justify-items: center; // GRID 专有

  // 对齐网格track
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(2, 200px);
  height: 1000px;
  justify-content: center;
  align-content: center;

  .item {
    padding: 20px;
    color: white;
    font-family: sans-serif;
    font-size: 30px;
    background-color: orangered;

    &--4 {
      background-color: crimson;
      grid-row: 2 / span 3;
      // align-self: start; // 覆盖align-items
      // justify-self: end; // 覆盖justify-item
    }
    &--6 {
      background-color: lightcoral;
      grid-row: 1 / span 2;
    }
    &--7 {
      background-color: palevioletred;
      grid-column: 1/-1;
    }
  }
}
